<template>
  <div class="t-login">
    <!-- 页面装饰图片 -->
    <!-- <image
      class="img-a"
      src="https://zhoukaiwen.com/img/loginImg/2.png"
    ></image>
    <image
      class="img-b"
      src="https://zhoukaiwen.com/img/loginImg/3.png"
    ></image> -->
    <!-- 标题 -->
    <div class="t-b">{{ title }}</div>
    <div class="t-b2">欢迎使用，OPENRLCL信息收集小程序</div>
    <form class="cl">
      <div class="t-a">
        <!-- <img src="../../../static/icon/user.png" />
        <div class="line"></div> -->
        <!-- <input
          type="number"
          name="usercode"
          placeholder="请输入账号"
          maxlength="15"
          v-model="normal.usercode"
        /> -->
        <van-field :value="normal.usercode" @blur="normal.usercode = $event.mp.detail.value" label="账号"
          placeholder="请输入账号">
        </van-field>
      </div>
      <div class="t-a">
        <!-- <img src="../../../static/icon/password.png" />
        <div class="line"></div> -->
        <!-- <input
          type="password"
          name="password"
          maxlength="20"
          placeholder="请输入密码"
          v-model="normal.password"
        /> -->
        <van-field :value="normal.password" @blur="normal.password = $event.mp.detail.value" type="password" label="密码"
          placeholder="请输入密码">
        </van-field>
      </div>
      <div style="margin-left: 20rpx; margin-bottom: 20rpx">
        <van-radio-group :value="isSure" direction="horizontal" @change="onChangeIs($event)">
          <van-radio name="1">同意
            <span class="ysname" @click="UserServiceAgreement">《用户服务协议》</span>
            <span>和</span>
            <span class="ysname" @click="UserPrivacy">《隐私保护》</span>
          </van-radio>
        </van-radio-group>
      </div>
      <button @tap="onSubmit">登 录</button>
    </form>
    <!-- <van-popup round :show="showPrivacy">
      <div class="popup">
        <div style="text-align: center; margin: 20rpx 0">用户隐私提示保护</div>
        <div class="ysbox">
          感谢您使用本产品，您使用本产品前应当仔细阅读并同意<span
            @click="handleOpenPrivacyContract"
            class="ysname"
            >{{ ysxyTitle }}</span
          >
          当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。
        </div>
        <div style="display: flex">
          <button
            style="background: #fff; width: 150rpx; color: #959595"
            @click="handleRefuse"
          >
            拒绝
          </button>
          <button
            id="agree-btn"
            open-type="agreePrivacyAuthorization"
            style="width: 150rpx"
            @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
          >
            同意
          </button>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>

<script>
  import { login } from "@/utils/login.js";
  import overDue from "@/utils/overDue.js";
  const rules = {
    usercode: [{ required: true, message: "请输入账号" }],
    password: [
      {
        required: true,
        message: "请输入密码",
      },
    ],
  };
  export default {
    data() {
      return {
        title: "欢迎回来！", //填写logo或者app名称，也可以用：欢迎回来，看您需求
        normal: {
          usercode: "",
          password: "",
        },
        ysxyTitle: "",
        showPrivacy: false,
        isSure: "",
      };
    },
    components: {},
    methods: {
      onChangeIs(e) {
        this.isSure = e.mp.detail;
      },
      //当前登录按钮操作
      onSubmit() {
        // console.log(this.normal, "22222");
        this.formRules(rules, this.normal, (status) => {
          if (status) {
            // this.initYsxy();
            if (this.isSure != "1") {
              wx.showToast({
                title: "请阅读并同意《用户服务协议》和《隐私保护》",
                icon: "none",
              });
            } else {
              login(this);
            }
          }
        });
        // login(this);
      },
      initYsxy() {
        wx.getPrivacySetting({
          success: (res) => {
            console.log(res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
            this.ysxyTitle = res.privacyContractName;
            if (!res.needAuthorization) {
              // 需要弹出隐私协议
              this.showPrivacy = true;
            } else {
              login(this);
              // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
              // wx.getUserProfile()
              // wx.chooseMedia()
              // wx.getClipboardData()
              // wx.startRecord()
            }
          },
          fail: () => { },
          complete: () => { },
        });
      },
      // 拒绝关闭用户隐私保护权益弹窗
      handleRefuse() {
        this.showPrivacy = false;
      },
      // 点击用户隐私保护权益打开页面
      handleOpenPrivacyContract() {
        wx.openPrivacyContract({
          fail: () => {
            wx.showToast({
              title: "遇到错误",
              icon: "error",
            });
          },
        });
      },
      // 同意后登录
      handleAgreePrivacyAuthorization() {
        login(this);
      },
      //表单校验
      formRules(rules, form, callback) {
        for (let key in rules) {
          const value = form[key];
          const rs = rules[key];
          for (let i = 0; i < rs.length; i++) {
            if (rs[i].required && value.length === 0) {
              wx.showToast({
                title: rs[i].message,
                icon: "none",
              });
              callback(false);
              return;
            } else if (rs[i].pattern && !rs[i].pattern.test(value)) {
              wx.showToast({
                title: rs[i].message,
                icon: "none",
              });
              callback(false);
              return;
            }
          }
        }
        callback(true);
      },
      UserServiceAgreement() {
        wx.navigateTo({
          url: "/pages/login/agree/UserServiceAgreement/main",
        });
      },
      UserPrivacy() {
        wx.navigateTo({
          url: "/pages/login/agree/UserPrivacy/main",
        });
      },
    },
  };
</script>

<style scoped>
  .img-a {
    position: absolute;
    width: 100%;
    top: -150rpx;
    right: 0;
  }

  .img-b {
    position: absolute;
    width: 50%;
    bottom: 0;
    left: -50rpx;
    /* margin-bottom: -200rpx; */
  }

  .t-login {
    width: 650rpx;
    margin: 0 auto;
    font-size: 28rpx;
    color: #000;
  }

  .t-login button {
    font-size: 28rpx;
    background: #5677fc;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
  }

  .t-login input {
    padding: 0 20rpx 0 120rpx;
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 50rpx;
    background: #f8f7fc;
    border: 1px solid #e9e9e9;
    font-size: 28rpx;
    border-radius: 50rpx;
  }

  .t-login .t-a {
    position: relative;
    margin-bottom: 20px;
  }

  .t-login .t-a>>>.van-cell {
    border-radius: 10px;
  }

  .t-login .t-a>>>.van-cell__title {
    margin-right: -25px !important;
  }

  .t-login .t-a image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    left: 40rpx;
    top: 28rpx;
    /* border-right: 2rpx solid #dedede; */
    margin-right: 20rpx;
  }

  .t-login .t-a .line {
    width: 2rpx;
    height: 40rpx;
    background-color: #dedede;
    position: absolute;
    top: 28rpx;
    left: 98rpx;
  }

  .t-login .t-b {
    text-align: left;
    font-size: 46rpx;
    color: #000;
    padding: 220rpx 0 30rpx 0;
    font-weight: bold;
  }

  .t-login .t-b2 {
    text-align: left;
    font-size: 32rpx;
    color: #aaaaaa;
    padding: 0rpx 0 120rpx 0;
  }

  .t-login .t-c {
    position: absolute;
    right: 22rpx;
    top: 22rpx;
    background: #5677fc;
    color: #fff;
    font-size: 24rpx;
    border-radius: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 25rpx;
  }

  .t-login .t-d {
    text-align: center;
    color: #999;
    margin: 80rpx 0;
  }

  .t-login .t-e {
    text-align: center;
    width: 250rpx;
    margin: 80rpx auto 0;
  }

  .t-login .t-g {
    float: left;
    width: 50%;
  }

  .t-login .t-e image {
    width: 50rpx;
    height: 50rpx;
  }

  .t-login .t-f {
    text-align: center;
    margin: 200rpx 0 0 0;
    color: #666;
  }

  .t-login .t-f text {
    margin-left: 20rpx;
    color: #aaaaaa;
    font-size: 27rpx;
  }

  .t-login .uni-input-placeholder {
    color: #000;
  }

  .cl {
    zoom: 1;
  }

  .cl:after {
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    content: "\20";
  }

  .popup {
    width: 550rpx;
    height: 500rpx;
  }

  .ysbox {
    margin: 0 40rpx 40rpx 40rpx;
  }

  .ysname {
    color: #157dfb;
  }
</style>